        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        table: '#1a472a',
                        cushion: '#8b4513',
                        cue: '#deb887',
                        ball: '#ffffff',
                        'striped-ball': '#f5f5dc',
                        'black-ball': '#000000',
                        'player-1': '#ff0000',
                        'player-2': '#0000ff',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            // 获取Canvas元素和上下文
            const canvas = document.getElementById('pool-table');
            const ctx = canvas.getContext('2d');
            
            // 获取DOM元素
            const powerSlider = document.getElementById('power-slider');
            const powerValue = document.getElementById('power-value');
            const gameStatus = document.getElementById('game-status');
            const turnIndicator = document.getElementById('turn-indicator');
            const player1Indicator = document.getElementById('player1-indicator');
            const player2Indicator = document.getElementById('player2-indicator');
            const player1Balls = document.getElementById('player1-balls');
            const player2Balls = document.getElementById('player2-balls');
            const resetBtn = document.getElementById('reset-btn');
            const startGameBtn = document.getElementById('start-game-btn');
            const gameInstructions = document.getElementById('game-instructions');
            
            // 设置Canvas尺寸，根据屏幕宽度自适应
            function resizeCanvas() {
                const container = canvas.parentElement;
                const containerWidth = container.clientWidth;
                const aspectRatio = 2 / 1; // 台球桌比例
                canvas.width = containerWidth;
                canvas.height = containerWidth / aspectRatio;
                
                // 重新绘制游戏
                drawGame();
            }
            
            // 监听窗口大小变化，调整Canvas尺寸
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            // 游戏配置
            const config = {
                ballRadius: 0, // 会根据画布大小动态计算
                tablePadding: 0, // 会根据画布大小动态计算
                pocketRadius: 0, // 会根据画布大小动态计算
                friction: 0.98, // 摩擦力
                minVelocity: 0.1, // 最小速度，低于此值时球停止运动
                cueLength: 0, // 会根据画布大小动态计算
                cueThickness: 0, // 会根据画布大小动态计算
            };
            
            // 更新配置，基于当前画布大小
            function updateConfig() {
                config.ballRadius = canvas.width / 60;
                config.tablePadding = canvas.width / 12;
                config.pocketRadius = canvas.width / 20;
                config.cueLength = canvas.width / 6;
                config.cueThickness = canvas.width / 120;
            }
            
            // 球对象类
            class Ball {
                constructor(x, y, number, color, isStriped = false) {
                    this.x = x;
                    this.y = y;
                    this.number = number;
                    this.color = color;
                    this.isStriped = isStriped;
                    this.velocityX = 0;
                    this.velocityY = 0;
                    this.inPocket = false;
                    this.isWhiteBall = number === 0;
                }
                
                draw() {
                    if (this.inPocket) return;
                    
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, config.ballRadius, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    
                    // 绘制球的边框
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, config.ballRadius, 0, Math.PI * 2);
                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
                    ctx.lineWidth = config.ballRadius / 10;
                    ctx.stroke();
                    
                    // 如果是带条纹的球，绘制条纹
                    if (this.isStriped && !this.isWhiteBall) {
                        ctx.beginPath();
                        ctx.rect(
                            this.x - config.ballRadius, 
                            this.y - config.ballRadius / 3, 
                            config.ballRadius * 2, 
                            config.ballRadius * 2 / 3
                        );
                        ctx.fillStyle = this.color;
                        ctx.fill();
                        
                        // 绘制条纹边框
                        ctx.beginPath();
                        ctx.rect(
                            this.x - config.ballRadius, 
                            this.y - config.ballRadius / 3, 
                            config.ballRadius * 2, 
                            config.ballRadius * 2 / 3
                        );
                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
                        ctx.lineWidth = config.ballRadius / 10;
                        ctx.stroke();
                    }
                    
                    // 如果不是白球，绘制球上的数字
                    if (!this.isWhiteBall) {
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, config.ballRadius / 2, 0, Math.PI * 2);
                        ctx.fillStyle = 'white';
                        ctx.fill();
                        
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, config.ballRadius / 2, 0, Math.PI * 2);
                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
                        ctx.lineWidth = config.ballRadius / 15;
                        ctx.stroke();
                        
                        ctx.font = `${config.ballRadius * 0.7}px Arial`;
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillStyle = 'black';
                        ctx.fillText(this.number.toString(), this.x, this.y);
                    }
                }
                
                update() {
                    if (this.inPocket) return;
                    
                    // 应用摩擦力
                    this.velocityX *= config.friction;
                    this.velocityY *= config.friction;
                    
                    // 如果速度太小，停止移动
                    if (Math.abs(this.velocityX) < config.minVelocity) this.velocityX = 0;
                    if (Math.abs(this.velocityY) < config.minVelocity) this.velocityY = 0;
                    
                    // 更新位置
                    this.x += this.velocityX;
                    this.y += this.velocityY;
                    
                    // 检查是否落入袋中
                    for (const pocket of pockets) {
                        const dx = this.x - pocket.x;
                        const dy = this.y - pocket.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < pocket.radius - config.ballRadius / 2) {
                            this.inPocket = true;
                            this.velocityX = 0;
                            this.velocityY = 0;
                            
                            // 处理球入袋事件
                            handleBallPocket(this);
                            break;
                        }
                    }
                    
                    // 边界碰撞检测
                    if (this.x - config.ballRadius < config.tablePadding) {
                        this.x = config.tablePadding + config.ballRadius;
                        this.velocityX = -this.velocityX * 0.8; // 能量损失
                    } else if (this.x + config.ballRadius > canvas.width - config.tablePadding) {
                        this.x = canvas.width - config.tablePadding - config.ballRadius;
                        this.velocityX = -this.velocityX * 0.8;
                    }
                    
                    if (this.y - config.ballRadius < config.tablePadding) {
                        this.y = config.tablePadding + config.ballRadius;
                        this.velocityY = -this.velocityY * 0.8;
                    } else if (this.y + config.ballRadius > canvas.height - config.tablePadding) {
                        this.y = canvas.height - config.tablePadding - config.ballRadius;
                        this.velocityY = -this.velocityY * 0.8;
                    }
                }
            }
            
            // 袋口对象
            const pockets = [
                { x: config.tablePadding, y: config.tablePadding, radius: config.pocketRadius }, // 左上
                { x: canvas.width / 2, y: config.tablePadding, radius: config.pocketRadius }, // 中上
                { x: canvas.width - config.tablePadding, y: config.tablePadding, radius: config.pocketRadius }, // 右上
                { x: config.tablePadding, y: canvas.height - config.tablePadding, radius: config.pocketRadius }, // 左下
                { x: canvas.width / 2, y: canvas.height - config.tablePadding, radius: config.pocketRadius }, // 中下
                { x: canvas.width - config.tablePadding, y: canvas.height - config.tablePadding, radius: config.pocketRadius }, // 右下
            ];
            
            // 球的数组
            let balls = [];
            
            // 初始化球
            function initBalls() {
                balls = [];
                
                // 添加白球（主球）
                const whiteBall = new Ball(
                    canvas.width / 3,
                    canvas.height / 2,
                    0,
                    'white'
                );
                balls.push(whiteBall);
                
                // 定义15个目标球的属性
                const ballDefinitions = [
                    { number: 1, color: '#F4D03F', isStriped: false }, // 黄色
                    { number: 2, color: '#2E86C1', isStriped: false }, // 蓝色
                    { number: 3, color: '#CB4335', isStriped: false }, // 红色
                    { number: 4, color: '#8E44AD', isStriped: false }, // 紫色
                    { number: 5, color: '#D35400', isStriped: false }, // 橙色
                    { number: 6, color: '#1E8449', isStriped: false }, // 绿色
                    { number: 7, color: '#943126', isStriped: false }, // 棕色
                    { number: 8, color: '#000000', isStriped: false }, // 黑色
                    { number: 9, color: '#F4D03F', isStriped: true },  // 黄色条纹
                    { number: 10, color: '#2E86C1', isStriped: true }, // 蓝色条纹
                    { number: 11, color: '#CB4335', isStriped: true }, // 红色条纹
                    { number: 12, color: '#8E44AD', isStriped: true }, // 紫色条纹
                    { number: 13, color: '#D35400', isStriped: true }, // 橙色条纹
                    { number: 14, color: '#1E8449', isStriped: true }, // 绿色条纹
                    { number: 15, color: '#943126', isStriped: true }, // 棕色条纹
                ];
                
                // 三角形排列的起始点
                const startX = canvas.width * 2 / 3;
                const startY = canvas.height / 2;
                
                // 排列间距
                const spacing = config.ballRadius * 2.1;
                
                // 生成三角形排列的球
                let ballIndex = 0;
                for (let row = 0; row < 5; row++) {
                    for (let col = 0; col <= row; col++) {
                        if (ballIndex >= ballDefinitions.length) break;
                        
                        const x = startX + row * spacing * Math.cos(Math.PI / 6);
                        const y = startY + (col - row / 2) * spacing;
                        
                        const ballDef = ballDefinitions[ballIndex];
                        const ball = new Ball(
                            x,
                            y,
                            ballDef.number,
                            ballDef.color,
                            ballDef.isStriped
                        );
                        balls.push(ball);
                        ballIndex++;
                    }
                }
                
                // 更新配置，确保袋口位置正确
                updateConfig();
                
                // 更新袋口位置
                pockets[0] = { x: config.tablePadding, y: config.tablePadding, radius: config.pocketRadius };
                pockets[1] = { x: canvas.width / 2, y: config.tablePadding, radius: config.pocketRadius };
                pockets[2] = { x: canvas.width - config.tablePadding, y: config.tablePadding, radius: config.pocketRadius };
                pockets[3] = { x: config.tablePadding, y: canvas.height - config.tablePadding, radius: config.pocketRadius };
                pockets[4] = { x: canvas.width / 2, y: canvas.height - config.tablePadding, radius: config.pocketRadius };
                pockets[5] = { x: canvas.width - config.tablePadding, y: canvas.height - config.tablePadding, radius: config.pocketRadius };
            }
            
            // 游戏状态
            const gameState = {
                isRunning: false,
                isPlayer1Turn: true,
                player1Balls: [1, 2, 3, 4, 5, 6, 7],
                player2Balls: [9, 10, 11, 12, 13, 14, 15],
                player1Type: null, // 'solid' 或 'striped'
                player2Type: null,
                isGameStarted: false,
                isBreakShot: true, // 是否是开球
                canMoveWhiteBall: false, // 是否可以移动白球
                ballsPocketedThisTurn: [], // 这回合打进的球
                lastShotFoul: false, // 上一次击球是否犯规
            };
            
            // 绘制台球桌
            function drawTable() {
                // 绘制台面
                ctx.fillStyle = '#1a472a';
                ctx.fillRect(
                    config.tablePadding, 
                    config.tablePadding, 
                    canvas.width - config.tablePadding * 2, 
                    canvas.height - config.tablePadding * 2
                );
                
                // 绘制袋口
                for (const pocket of pockets) {
                    ctx.beginPath();
                    ctx.arc(pocket.x, pocket.y, pocket.radius, 0, Math.PI * 2);
                    ctx.fillStyle = '#000000';
                    ctx.fill();
                }
                
                // 绘制库边
                ctx.fillStyle = '#8b4513';
                
                // 上边
                ctx.fillRect(
                    0, 
                    0, 
                    canvas.width, 
                    config.tablePadding
                );
                
                // 下边
                ctx.fillRect(
                    0, 
                    canvas.height - config.tablePadding, 
                    canvas.width, 
                    config.tablePadding
                );
                
                // 左边
                ctx.fillRect(
                    0, 
                    config.tablePadding, 
                    config.tablePadding, 
                    canvas.height - config.tablePadding * 2
                );
                
                // 右边
                ctx.fillRect(
                    canvas.width - config.tablePadding, 
                    config.tablePadding, 
                    config.tablePadding, 
                    canvas.height - config.tablePadding * 2
                );
                
                // 绘制库边内侧曲线
                ctx.fillStyle = '#5d2c13';
                
                // 左上内侧曲线
                drawCushionCurve(
                    config.tablePadding, 
                    config.tablePadding, 
                    Math.PI, 
                    Math.PI * 3 / 2
                );
                
                // 右上内侧曲线
                drawCushionCurve(
                    canvas.width - config.tablePadding, 
                    config.tablePadding, 
                    Math.PI * 3 / 2, 
                    Math.PI * 2
                );
                
                // 左下内侧曲线
                drawCushionCurve(
                    config.tablePadding, 
                    canvas.height - config.tablePadding, 
                    Math.PI / 2, 
                    Math.PI
                );
                
                // 右下内侧曲线
                drawCushionCurve(
                    canvas.width - config.tablePadding, 
                    canvas.height - config.tablePadding, 
                    0, 
                    Math.PI / 2
                );
            }
            
            // 绘制库边曲线
            function drawCushionCurve(x, y, startAngle, endAngle) {
                ctx.beginPath();
                ctx.arc(x, y, config.tablePadding, startAngle, endAngle);
                ctx.lineTo(x, y);
                ctx.closePath();
                ctx.fill();
            }
            
            // 绘制球杆
            function drawCue() {
                if (isCueVisible && gameState.isGameStarted && !areBallsMoving()) {
                    const whiteBall = balls[0];
                    if (whiteBall.inPocket) return;
                    
                    // 计算球杆角度
                    const angle = Math.atan2(
                        cueEndY - whiteBall.y, 
                        cueEndX - whiteBall.x
                    );
                    
                    // 计算球杆起点
                    const startX = whiteBall.x - Math.cos(angle) * (config.ballRadius + 5);
                    const startY = whiteBall.y - Math.sin(angle) * (config.ballRadius + 5);
                    
                    // 计算球杆终点
                    const endX = startX - Math.cos(angle) * config.cueLength;
                    const endY = startY - Math.sin(angle) * config.cueLength;
                    
                    // 绘制球杆
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(endX, endY);
                    ctx.lineWidth = config.cueThickness;
                    ctx.strokeStyle = '#deb887';
                    ctx.stroke();
                    
                    // 绘制球杆尾部
                    ctx.beginPath();
                    ctx.arc(endX, endY, config.cueThickness, 0, Math.PI * 2);
                    ctx.fillStyle = '#8B4513';
                    ctx.fill();
                    
                    // 绘制瞄准线
                    ctx.beginPath();
                    ctx.moveTo(whiteBall.x, whiteBall.y);
                    ctx.lineTo(
                        whiteBall.x + Math.cos(angle) * 1000, 
                        whiteBall.y + Math.sin(angle) * 1000
                    );
                    ctx.setLineDash([5, 5]);
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                    ctx.stroke();
                    ctx.setLineDash([]);
                }
            }
            
            // 检查球之间的碰撞
            function checkBallCollisions() {
                for (let i = 0; i < balls.length; i++) {
                    const ballA = balls[i];
                    
                    if (ballA.inPocket) continue;
                    
                    for (let j = i + 1; j < balls.length; j++) {
                        const ballB = balls[j];
                        
                        if (ballB.inPocket) continue;
                        
                        // 计算两球之间的距离
                        const dx = ballB.x - ballA.x;
                        const dy = ballB.y - ballA.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        // 如果两球相撞
                        if (distance < config.ballRadius * 2) {
                            // 计算碰撞法线
                            const nx = dx / distance;
                            const ny = dy / distance;
                            
                            // 计算相对速度
                            const dvx = ballB.velocityX - ballA.velocityX;
                            const dvy = ballB.velocityY - ballA.velocityY;
                            
                            // 计算速度在法线方向上的投影
                            const velocityAlongNormal = dvx * nx + dvy * ny;
                            
                            // 如果两球正在远离，不处理碰撞
                            if (velocityAlongNormal > 0) continue;
                            
                            // 计算碰撞后的速度变化
                            const j = -(1 + 0.9) * velocityAlongNormal; // 弹性系数为0.9
                            const impulse = j / (1/1 + 1/1); // 假设两球质量相等
                            
                            // 更新球的速度
                            ballA.velocityX -= impulse * nx;
                            ballA.velocityY -= impulse * ny;
                            ballB.velocityX += impulse * nx;
                            ballB.velocityY += impulse * ny;
                            
                            // 防止球重叠
                            const overlap = config.ballRadius * 2 - distance;
                            ballA.x -= nx * overlap / 2;
                            ballA.y -= ny * overlap / 2;
                            ballB.x += nx * overlap / 2;
                            ballB.y += ny * overlap / 2;
                        }
                    }
                }
            }
            
            // 检查是否所有球都停止移动
            function areBallsMoving() {
                for (const ball of balls) {
                    if (ball.inPocket) continue;
                    
                    if (Math.abs(ball.velocityX) > config.minVelocity || 
                        Math.abs(ball.velocityY) > config.minVelocity) {
                        return true;
                    }
                }
                return false;
            }
            
            // 处理球入袋事件
            function handleBallPocket(ball) {
                // 添加到这回合打进的球列表
                gameState.ballsPocketedThisTurn.push(ball);
                
                // 更新玩家球状态显示
                updatePlayerBallsDisplay();
                
                // 检查是否是白球入袋
                if (ball.isWhiteBall) {
                    gameState.lastShotFoul = true;
                    gameState.canMoveWhiteBall = true;
                    gameStatus.textContent = "白球入袋，对手获得自由球";
                }
                
                // 检查是否是8号球入袋
                if (ball.number === 8) {
                    handle8BallPocket();
                } else {
                    // 分配球组（如果还没有分配）
                    if (!gameState.player1Type && !gameState.player2Type) {
                        // 开球后首次进球，确定球组
                        if (gameState.isBreakShot) {
                            if (ball.isStriped) {
                                gameState.player1Type = gameState.isPlayer1Turn ? 'striped' : 'solid';
                                gameState.player2Type = gameState.isPlayer1Turn ? 'solid' : 'striped';
                            } else {
                                gameState.player1Type = gameState.isPlayer1Turn ? 'solid' : 'striped';
                                gameState.player2Type = gameState.isPlayer1Turn ? 'striped' : 'solid';
                            }
                            
                            gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 获得 ${gameState.isPlayer1Turn ? gameState.player1Type : gameState.player2Type} 球`;
                            
                            // 更新玩家球状态显示
                            updatePlayerBallsDisplay();
                        }
                    }
                    
                    // 检查打进的球是否属于当前玩家
                    const currentPlayerBalls = gameState.isPlayer1Turn ? gameState.player1Balls : gameState.player2Balls;
                    if (currentPlayerBalls.includes(ball.number)) {
                        // 从玩家的球列表中移除
                        const index = currentPlayerBalls.indexOf(ball.number);
                        if (index !== -1) {
                            currentPlayerBalls.splice(index, 1);
                        }
                        
                        // 如果打进了自己的球，继续当前玩家的回合
                        gameState.lastShotFoul = false;
                    } else {
                        // 打进了对手的球，判犯规
                        gameState.lastShotFoul = true;
                    }
                }
            }
            
            // 处理8号球入袋
            function handle8BallPocket() {
                // 检查是否是开球阶段
                if (gameState.isBreakShot) {
                    // 开球打进8号球，需要重新摆球
                    gameStatus.textContent = "开球打进8号球，重新摆球";
                    initBalls();
                    gameState.isBreakShot = true;
                    return;
                }
                
                // 检查当前玩家是否已经打完所有自己的球
                const currentPlayerBalls = gameState.isPlayer1Turn ? gameState.player1Balls : gameState.player2Balls;
                if (currentPlayerBalls.length === 0) {
                    // 合法打进8号球，当前玩家获胜
                    gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 获胜!`;
                    gameState.isRunning = false;
                    resetBtn.classList.remove('hidden');
                    startGameBtn.classList.add('hidden');
                } else {
                    // 未打完自己的球就打进8号球，判负
                    gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 未打完所有球就打进8号球，判负!`;
                    gameState.isRunning = false;
                    resetBtn.classList.remove('hidden');
                    startGameBtn.classList.add('hidden');
                }
            }
            
            // 处理击球后
            function handleShotComplete() {
                // 检查是否有犯规
                if (gameState.lastShotFoul) {
                    // 犯规，换对手击球
                    gameState.isPlayer1Turn = !gameState.isPlayer1Turn;
                    gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 击球（上回合犯规）`;
                } else {
                    // 检查这回合是否打进了球
                    const playerBallsPocketed = gameState.ballsPocketedThisTurn.filter(ball => {
                        if (ball.isWhiteBall || ball.number === 8) return false;
                        
                        const currentPlayerBalls = gameState.isPlayer1Turn ? gameState.player1Balls : gameState.player2Balls;
                        return currentPlayerBalls.includes(ball.number);
                    });
                    
                    if (playerBallsPocketed.length === 0) {
                        // 没打进自己的球，换对手击球
                        gameState.isPlayer1Turn = !gameState.isPlayer1Turn;
                        gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 击球`;
                    } else {
                        // 打进了自己的球，继续当前玩家的回合
                        gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 继续击球`;
                    }
                }
                
                // 如果是开球，且开球合法（有球进袋），则不再是开球状态
                if (gameState.isBreakShot && gameState.ballsPocketedThisTurn.length > 0) {
                    gameState.isBreakShot = false;
                }
                
                // 重置这回合打进的球列表
                gameState.ballsPocketedThisTurn = [];
                
                // 更新回合指示器
                updateTurnIndicator();
                
                // 如果白球没有入袋，取消自由球状态
                if (!balls[0].inPocket) {
                    gameState.canMoveWhiteBall = false;
                }
            }
            
            // 更新玩家球状态显示
            function updatePlayerBallsDisplay() {
                // 清空显示
                player1Balls.innerHTML = '';
                player2Balls.innerHTML = '';
                
                // 确定玩家1和玩家2的球组
                const player1Type = gameState.player1Type;
                const player2Type = gameState.player2Type;
                
                // 如果球组还没确定，显示所有球
                if (!player1Type || !player2Type) {
                    for (let i = 1; i <= 7; i++) {
                        const ball = document.createElement('div');
                        ball.className = 'w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs';
                        ball.textContent = i;
                        player1Balls.appendChild(ball);
                    }
                    
                    for (let i = 9; i <= 15; i++) {
                        const ball = document.createElement('div');
                        ball.className = 'w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs';
                        ball.textContent = i;
                        player2Balls.appendChild(ball);
                    }
                    
                    return;
                }
                
                // 显示玩家1的球
                for (const ballNumber of gameState.player1Balls) {
                    const ballDef = getBallDefinition(ballNumber);
                    if (!ballDef) continue;
                    
                    const ball = document.createElement('div');
                    ball.className = `w-6 h-6 rounded-full flex items-center justify-center text-xs ${ballDef.isStriped ? 'bg-stripes' : ''}`;
                    ball.style.backgroundColor = ballDef.color;
                    ball.textContent = ballNumber;
                    player1Balls.appendChild(ball);
                }
                
                // 显示玩家2的球
                for (const ballNumber of gameState.player2Balls) {
                    const ballDef = getBallDefinition(ballNumber);
                    if (!ballDef) continue;
                    
                    const ball = document.createElement('div');
                    ball.className = `w-6 h-6 rounded-full flex items-center justify-center text-xs ${ballDef.isStriped ? 'bg-stripes' : ''}`;
                    ball.style.backgroundColor = ballDef.color;
                    ball.textContent = ballNumber;
                    player2Balls.appendChild(ball);
                }
            }
            
            // 获取球的定义
            function getBallDefinition(number) {
                const ballDefinitions = [
                    { number: 1, color: '#F4D03F', isStriped: false },
                    { number: 2, color: '#2E86C1', isStriped: false },
                    { number: 3, color: '#CB4335', isStriped: false },
                    { number: 4, color: '#8E44AD', isStriped: false },
                    { number: 5, color: '#D35400', isStriped: false },
                    { number: 6, color: '#1E8449', isStriped: false },
                    { number: 7, color: '#943126', isStriped: false },
                    { number: 8, color: '#000000', isStriped: false },
                    { number: 9, color: '#F4D03F', isStriped: true },
                    { number: 10, color: '#2E86C1', isStriped: true },
                    { number: 11, color: '#CB4335', isStriped: true },
                    { number: 12, color: '#8E44AD', isStriped: true },
                    { number: 13, color: '#D35400', isStriped: true },
                    { number: 14, color: '#1E8449', isStriped: true },
                    { number: 15, color: '#943126', isStriped: true },
                ];
                
                return ballDefinitions.find(def => def.number === number);
            }
            
            // 更新回合指示器
            function updateTurnIndicator() {
                player1Indicator.style.backgroundColor = gameState.isPlayer1Turn ? '#ff0000' : '#4b5563';
                player2Indicator.style.backgroundColor = !gameState.isPlayer1Turn ? '#0000ff' : '#4b5563';
                
                turnIndicator.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 的回合`;
            }
            
            // 绘制游戏
            function drawGame() {
                // 清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制台球桌
                drawTable();
                
                // 绘制球
                for (const ball of balls) {
                    ball.draw();
                }
                
                // 绘制球杆
                drawCue();
                
                // 如果可以移动白球，显示提示
                if (gameState.canMoveWhiteBall) {
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
                    ctx.font = '14px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText('点击放置白球', canvas.width / 2, canvas.height / 2);
                }
            }
            
            // 更新游戏状态
            function updateGame() {
                if (!gameState.isRunning) return;
                
                // 更新球的位置
                for (const ball of balls) {
                    ball.update();
                }
                
                // 检查球之间的碰撞
                checkBallCollisions();
                
                // 如果所有球都停止移动，处理击球完成
                if (!areBallsMoving() && !gameState.canMoveWhiteBall) {
                    if (isShotTaken) {
                        handleShotComplete();
                        isShotTaken = false;
                    }
                }
                
                // 重绘游戏
                drawGame();
                
                // 继续游戏循环
                requestAnimationFrame(updateGame);
            }
            
            // 球杆相关变量
            let isCueVisible = true;
            let cueEndX = 0;
            let cueEndY = 0;
            let isDragging = false;
            let isShotTaken = false;
            
            // 鼠标事件处理
            canvas.addEventListener('mousedown', (e) => {
                if (!gameState.isRunning || areBallsMoving()) return;
                
                const rect = canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;
                
                const whiteBall = balls[0];
                
                // 如果可以移动白球，处理白球放置
                if (gameState.canMoveWhiteBall) {
                    // 确保白球放置在台面上
                    const validX = Math.max(
                        config.tablePadding + config.ballRadius, 
                        Math.min(canvas.width - config.tablePadding - config.ballRadius, mouseX)
                    );
                    
                    const validY = Math.max(
                        config.tablePadding + config.ballRadius, 
                        Math.min(canvas.height - config.tablePadding - config.ballRadius, mouseY)
                    );
                    
                    // 检查新位置是否与其他球重叠
                    let overlap = false;
                    for (const ball of balls) {
                        if (ball === whiteBall || ball.inPocket) continue;
                        
                        const dx = validX - ball.x;
                        const dy = validY - ball.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < config.ballRadius * 2) {
                            overlap = true;
                            break;
                        }
                    }
                    
                    if (!overlap) {
                        whiteBall.x = validX;
                        whiteBall.y = validY;
                        whiteBall.inPocket = false;
                        gameState.canMoveWhiteBall = false;
                        gameStatus.textContent = `玩家 ${gameState.isPlayer1Turn ? '1' : '2'} 击球`;
                    }
                    
                    return;
                }
                
                // 计算鼠标与白球的距离
                const dx = mouseX - whiteBall.x;
                const dy = mouseY - whiteBall.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                // 如果鼠标在白球附近，开始拖拽球杆
                if (distance < config.ballRadius * 3 && !whiteBall.inPocket) {
                    isDragging = true;
                    cueEndX = mouseX;
                    cueEndY = mouseY;
                }
            });
            
            canvas.addEventListener('mousemove', (e) => {
                if (!gameState.isRunning || areBallsMoving() || !isDragging) return;
                
                const rect = canvas.getBoundingClientRect();
                cueEndX = e.clientX - rect.left;
                cueEndY = e.clientY - rect.top;
            });
            
            canvas.addEventListener('mouseup', (e) => {
                if (!gameState.isRunning || areBallsMoving() || !isDragging) {
                    isDragging = false;
                    return;
                }
                
                isDragging = false;
                
                const whiteBall = balls[0];
                if (whiteBall.inPocket) return;
                
                // 计算球杆方向和力度
                const dx = whiteBall.x - cueEndX;
                const dy = whiteBall.y - cueEndY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                // 力度基于距离和滑块值
                const maxPower = 20;
                const power = (distance / 100) * (powerSlider.value / 100) * maxPower;
                
                // 限制最大力度
                const limitedPower = Math.min(power, maxPower);
                
                // 设置白球速度
                whiteBall.velocityX = (dx / distance) * limitedPower;
                whiteBall.velocityY = (dy / distance) * limitedPower;
                
                // 标记击球已发生
                isShotTaken = true;
                
                // 重置球杆状态
                cueEndX = 0;
                cueEndY = 0;
                
                // 重置犯规状态
                gameState.lastShotFoul = false;
                
                // 如果是开球，检查开球是否合法
                if (gameState.isBreakShot) {
                    gameStatus.textContent = "开球中...";
                } else {
                    gameStatus.textContent = "击球中...";
                }
            });
            
            // 滑块事件处理
            powerSlider.addEventListener('input', () => {
                powerValue.textContent = `${powerSlider.value}%`;
            });
            
            // 开始游戏按钮
            startGameBtn.addEventListener('click', () => {
                startGame();
            });
            
            // 重置游戏按钮
            resetBtn.addEventListener('click', () => {
                startGame();
            });
            
            // 开始游戏
            function startGame() {
                initBalls();
                
                // 重置游戏状态
                gameState.isRunning = true;
                gameState.isPlayer1Turn = true;
                gameState.player1Balls = [1, 2, 3, 4, 5, 6, 7];
                gameState.player2Balls = [9, 10, 11, 12, 13, 14, 15];
                gameState.player1Type = null;
                gameState.player2Type = null;
                gameState.isGameStarted = true;
                gameState.isBreakShot = true;
                gameState.canMoveWhiteBall = false;
                gameState.ballsPocketedThisTurn = [];
                gameState.lastShotFoul = false;
                
                // 更新UI
                gameStatus.textContent = "准备开球";
                updateTurnIndicator();
                updatePlayerBallsDisplay();
                
                // 显示/隐藏按钮
                resetBtn.classList.add('hidden');
                startGameBtn.classList.add('hidden');
                
                // 开始游戏循环
                updateGame();
            }
            
            // 初始化游戏
            initBalls();
            updatePlayerBallsDisplay();
            updateTurnIndicator();
        });
